import { Routes, Route, Link, NavLink } from "react-router-dom";

import Home from "./pages/Home";
import Pins from "./pages/Pins";
import Course from "./pages/Course";

import New from "./pages/Pins/components/New";
import Hot from "./pages/Pins/components/Hot";
import Following from "./pages/Pins/components/Following";

import "./App.css";

export default function App() {
  /*
    当路由路径是 /，希望加载 Home 组件显示
    当路由路径是 /pins，希望加载 Pins 组件显示
    当路由路径是 /course，希望加载 Course 组件显示
  */
  return (
    <>
      <ul className="nav-list">
        <li className="nav-item">
          {/* Link: 实现路由连接跳转（跳转路由） */}
          {/* <Link to="/">首页</Link> */}

          {/* NavLink: 和 Link 功能一致，不同的是高亮状态下多一个 class=active */}
          <NavLink to="/">首页</NavLink>
        </li>
        <li className="nav-item">
          <NavLink to="/pins">沸点</NavLink>
          {/* <a href="/pins">沸点</a> */}
        </li>
        <li className="nav-item">
          <NavLink to="/course">课程</NavLink>
        </li>
      </ul>
      {/* 
        Routes: 渲染第一个满足条件路由Route

          特点：只能渲染一级路由
            
          二级路由如何渲染？
            需要在上一级路由组件，写上 Outlet 来渲染
      */}
      <Routes>
        {/* 
        路由组件：通过Route加载的组件，就是路由组件

        Route组件：
          根据路由路径，加载渲染路由组件
          匹配路由路径看是否与path相同，相同就会渲染element

        Route必须配合Routes一起使用
      */}
        <Route path="/" element={<Home />} />
        <Route path="/pins" element={<Pins />}>
          {/* 嵌套路由写法 */}
          <Route path="/pins/new" element={<New />} />
          <Route path="/pins/hot" element={<Hot />} />
          <Route path="/pins/following" element={<Following />} />
        </Route>
        <Route path="/course" element={<Course />} />
      </Routes>
    </>
  );
}
